

import { StyleSheet, Dimensions, Platform } from 'react-native';

const { width: screenWidth } = Dimensions.get('window');

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  
  // 顶部导航栏
  header: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
  },
  headerPlaceholder: {
    width: 40,
  },
  
  // 滚动视图
  scrollView: {
    flex: 1,
  },
  
  // 审批基本信息卡片
  approvalInfoCard: {
    marginHorizontal: 16,
    marginTop: 16,
    borderRadius: 12,
    padding: 16,
  },
  approvalInfoHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  approvalTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    flex: 1,
  },
  statusBadge: {
    backgroundColor: 'rgba(245, 158, 11, 0.2)',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 14,
    color: '#f59e0b',
    fontWeight: '500',
  },
  approvalInfoGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  approvalInfoItem: {
    width: '48%',
    marginBottom: 12,
  },
  approvalInfoLabel: {
    fontSize: 14,
    color: '#9ca3af',
    marginBottom: 4,
  },
  approvalInfoValue: {
    fontSize: 14,
    color: '#ffffff',
    fontWeight: '500',
  },
  
  // 流程图区域
  flowChartSection: {
    marginHorizontal: 16,
    marginTop: 16,
    flex: 1,
  },
  flowChartHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  flowChartTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
  },
  zoomControls: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  zoomButton: {
    width: 32,
    height: 32,
    backgroundColor: '#111827',
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  // 加载状态
  loadingContainer: {
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 400,
  },
  loadingSpinner: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 3,
    borderColor: 'rgba(99, 102, 241, 0.3)',
    borderTopColor: '#6366f1',
    marginBottom: 12,
  },
  loadingText: {
    fontSize: 16,
    color: '#9ca3af',
  },
  
  // 流程图容器
  flowContainer: {
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 16,
    overflow: 'hidden',
    minHeight: 400,
  },
  flowSvg: {
    width: '100%',
    height: 400,
  },
  
  // 节点样式
  nodeCompleted: {
    fill: '#10b981',
  },
  nodeCurrent: {
    fill: '#6366f1',
  },
  nodePending: {
    fill: '#6b7280',
  },
  nodeFuture: {
    fill: '#4b5563',
  },
  
  // 连接线样式
  lineCompleted: {
    stroke: '#10b981',
  },
  lineCurrent: {
    stroke: '#6366f1',
  },
  lineDefault: {
    stroke: '#4b5563',
  },
  
  // 图例说明
  legendSection: {
    marginHorizontal: 16,
    marginBottom: 16,
    marginTop: 16,
  },
  legendTitle: {
    fontSize: 14,
    fontWeight: '500',
    color: '#d1d5db',
    marginBottom: 12,
  },
  legendGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  legendItem: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '48%',
    marginBottom: 8,
  },
  legendDot: {
    width: 16,
    height: 16,
    borderRadius: 8,
    marginRight: 8,
  },
  legendText: {
    fontSize: 14,
    color: '#9ca3af',
  },
  
  // 节点信息浮层
  tooltipOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  tooltip: {
    position: 'absolute',
    backgroundColor: 'rgba(17, 24, 39, 0.95)',
    borderRadius: 12,
    padding: 16,
    maxWidth: 280,
    borderWidth: 1,
    borderColor: 'rgba(99, 102, 241, 0.3)',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 8,
      },
      android: {
        elevation: 8,
      },
    }),
  },
  tooltipTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#ffffff',
    marginBottom: 8,
  },
  tooltipContent: {
    marginBottom: 12,
  },
  tooltipRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 4,
  },
  tooltipLabel: {
    fontSize: 14,
    color: '#9ca3af',
  },
  tooltipValue: {
    fontSize: 14,
    color: '#ffffff',
    fontWeight: '500',
  },
  tooltipCommentSection: {
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#374151',
  },
  tooltipCommentLabel: {
    fontSize: 12,
    color: '#9ca3af',
    marginBottom: 4,
  },
  tooltipComment: {
    fontSize: 14,
    color: '#ffffff',
    lineHeight: 20,
  },
});

